// AxiomTimePicker 组件样式
.axiom-time-picker {
  display: flex;
  flex-direction: column;
  gap: var(--axiom-time-picker-gap, 6px);
  width: 100%;

  // 标签样式
  &__label {
    font-size: var(--axiom-time-picker-label-font-size, 14px);
    font-weight: var(--axiom-time-picker-label-weight, 500);
    color: var(--text-color);
    font-family: var(--font-family-base);
    line-height: 1.4;
    
    // 必填标记
    .axiom-time-picker__required {
      color: var(--danger-color);
      margin-left: var(--axiom-time-picker-required-margin-left, 2px);
    }
  }

  // 时间选择器字段样式
  &__field {
    .el-input__wrapper {
      background-color: var(--bg-color-secondary) !important;
      border: 1px solid var(--border-color) !important;
      border-radius: var(--border-radius-base) !important;
      box-shadow: none !important;
      transition: all 0.3s ease !important;
      padding: 8px 12px !important;
      
      &:hover {
        border-color: var(--primary-color) !important;
      }
      
      &.is-focus {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 2px var(--primary-color-light) !important;
      }
    }
    
    .el-input__inner {
      color: var(--text-color) !important;
      font-family: var(--font-family-base) !important;
      font-size: 14px !important;
      
      &::placeholder {
        color: var(--text-color-secondary) !important;
      }
    }
    
    // 前缀图标
    .el-input__prefix {
      .el-input__prefix-inner {
        color: var(--text-color-secondary) !important;
        
        .el-icon {
          font-size: var(--axiom-time-picker-icon-font-size, 16px) !important;
        }
      }
    }
    
    // 后缀图标
    .el-input__suffix {
      .el-input__suffix-inner {
        color: var(--text-color-secondary) !important;
        
        .el-icon {
          font-size: var(--axiom-time-picker-icon-font-size, 16px) !important;
          
          &:hover {
            color: var(--text-color) !important;
          }
        }
      }
    }
    
    // 禁用状态
    &.is-disabled {
      .el-input__wrapper {
        background-color: var(--disabled-bg-color) !important;
        border-color: var(--disabled-border-color) !important;
        cursor: not-allowed !important;
      }
      
      .el-input__inner {
        color: var(--disabled-text-color) !important;
        cursor: not-allowed !important;
      }
      
      .el-input__prefix-inner,
      .el-input__suffix-inner {
        color: var(--disabled-text-color) !important;
      }
    }
    
    // 错误状态
    &--error {
      .el-input__wrapper {
        border-color: var(--danger-color) !important;
        
        &:hover,
        &.is-focus {
          border-color: var(--danger-color) !important;
          box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2) !important;
        }
      }
    }
    
    // 尺寸变体
    &--large {
      .el-input__wrapper {
        padding: var(--axiom-time-picker-lg-padding, 12px 16px) !important;
      }
      
      .el-input__inner {
        font-size: var(--axiom-time-picker-lg-font-size, 16px) !important;
      }
    }
    
    &--small {
      .el-input__wrapper {
        padding: var(--axiom-time-picker-sm-padding, 6px 8px) !important;
      }
      
      .el-input__inner {
        font-size: var(--axiom-time-picker-sm-font-size, 12px) !important;
      }
    }
  }

  // 错误信息样式
  &__error {
    font-size: var(--axiom-time-picker-error-font-size, 12px);
    color: var(--danger-color);
    font-family: var(--font-family-base);
    line-height: 1.4;
    margin-top: var(--axiom-time-picker-error-margin-top, 2px);
  }

  // 帮助文本样式
  &__help {
    font-size: var(--axiom-time-picker-help-font-size, 12px);
    color: var(--text-color-secondary);
    font-family: var(--font-family-base);
    line-height: 1.4;
    margin-top: var(--axiom-time-picker-help-margin-top, 2px);
  }
}

// 时间选择器弹出面板样式（全局）
.el-time-panel {
  background-color: var(--axiom-time-panel-bg, var(--bg-color-secondary)) !important;
  border: var(--axiom-time-panel-border, 1px solid var(--border-color)) !important;
  border-radius: var(--axiom-time-panel-radius, var(--border-radius-base)) !important;
  box-shadow: var(--axiom-time-panel-shadow, var(--box-shadow-base)) !important;
  backdrop-filter: var(--axiom-time-panel-backdrop-filter, var(--backdrop-blur));
  -webkit-backdrop-filter: var(--axiom-time-panel-backdrop-filter, var(--backdrop-blur));
  
  // 内容区域
  .el-time-panel__content {
    background-color: transparent !important;
    
    // 时间列表
    .el-time-spinner {
      .el-time-spinner__wrapper {
        .el-scrollbar__view {
          .el-time-spinner__item {
            color: var(--text-color) !important;
            font-family: var(--font-family-base) !important;
            
            &:hover {
              background-color: var(--axiom-time-spinner-item-hover-bg, var(--primary-color-light)) !important;
              color: var(--axiom-time-spinner-item-hover-color, var(--primary-color)) !important;
            }
            
            &.is-active {
              background-color: var(--axiom-time-spinner-item-active-bg, var(--primary-color)) !important;
              color: var(--axiom-time-spinner-item-active-color, var(--text-color-on-primary)) !important;
              font-weight: var(--axiom-time-spinner-item-active-weight, 600) !important;
            }
            
            &.is-disabled {
              color: var(--disabled-text-color) !important;
              background-color: var(--disabled-bg-color) !important;
              cursor: not-allowed !important;
            }
          }
        }
      }
      
      // 分隔线
      &::after {
        border-right: 1px solid var(--axiom-time-spinner-divider-color, var(--border-color)) !important;
      }
    }
  }
  
  // 底部按钮
  .el-time-panel__footer {
    border-top: var(--axiom-time-footer-border-top, 1px solid var(--border-color)) !important;
    background-color: var(--axiom-time-footer-bg, var(--bg-color)) !important;
    
    .el-button {
      background-color: transparent !important;
      border-color: var(--border-color) !important;
      color: var(--text-color) !important;
      font-family: var(--font-family-base) !important;
      
      &:hover {
        border-color: var(--axiom-time-footer-btn-hover-border-color, var(--primary-color)) !important;
        color: var(--axiom-time-footer-btn-hover-color, var(--primary-color)) !important;
      }
      
      &.el-button--primary {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: var(--text-color-on-primary) !important;
        
        &:hover {
          background-color: var(--primary-color) !important;
          opacity: var(--axiom-time-footer-btn-primary-hover-opacity, 0.8);
        }
      }
    }
  }
}

// 时间范围选择器样式
.el-time-range-picker {
  .el-time-panel {
    .el-time-panel__content {
      display: flex;
      
      .el-time-spinner {
        &:not(:last-child) {
          border-right: 1px solid var(--border-color) !important;
        }
      }
    }
  }
}

// 箭头控制模式样式
.el-time-spinner--arrow-control {
  .el-time-spinner__wrapper {
    .el-time-spinner__arrow {
      color: var(--text-color-secondary) !important;
      
      &:hover {
        color: var(--axiom-time-arrow-control-hover-color, var(--primary-color)) !important;
      }
      
      &.el-icon-arrow-up {
        border-bottom: var(--axiom-time-arrow-up-border-bottom, 1px solid var(--border-color)) !important;
      }
      
      &.el-icon-arrow-down {
        border-top: var(--axiom-time-arrow-down-border-top, 1px solid var(--border-color)) !important;
      }
    }
    
    .el-time-spinner__input {
      background-color: var(--bg-color-secondary) !important;
      border: 1px solid var(--border-color) !important;
      color: var(--text-color) !important;
      font-family: var(--font-family-base) !important;
      
      &:focus {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 2px var(--primary-color-light) !important;
      }
    }
  }
}

// 时间选择器下拉箭头
.el-popper.is-time-picker {
  .el-popper__arrow {
    &::before {
      border-color: var(--border-color) !important;
    }
    
    &::after {
      border-color: var(--bg-color-secondary) !important;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .el-time-panel {
    width: 100% !important;
    max-width: var(--axiom-time-panel-mobile-max-width, 280px) !important;
    
    .el-time-panel__content {
      .el-time-spinner {
        .el-time-spinner__wrapper {
          .el-scrollbar__view {
            .el-time-spinner__item {
              padding: var(--axiom-time-spinner-mobile-item-padding, 8px 4px) !important;
              font-size: var(--axiom-time-spinner-mobile-item-font-size, 12px) !important;
            }
          }
        }
      }
    }
  }
  
  .el-time-range-picker {
    .el-time-panel {
      .el-time-panel__content {
        flex-direction: column;
        
        .el-time-spinner {
          &:not(:last-child) {
            border-right: none !important;
            border-bottom: 1px solid var(--axiom-time-spinner-divider-color, var(--border-color)) !important;
          }
        }
      }
    }
  }
}